{% extends "./inc_baseNew.html" %}
{% block content %}
    <!--
        PAGE HEADER

        CLASSES:
            .page-header-xs	= 20px margins
            .page-header-md	= 50px margins
            .page-header-lg	= 80px margins
            .page-header-xlg= 130px margins
            .dark			= dark page header

            .shadow-before-1 	= shadow 1 header top
            .shadow-after-1 	= shadow 1 header bottom
            .shadow-before-2 	= shadow 2 header top
            .shadow-after-2 	= shadow 2 header bottom
            .shadow-before-3 	= shadow 3 header top
            .shadow-after-3 	= shadow 3 header bottom
    -->
{#
    <section class="page-header dark page-header-lg parallax parallax-3" style="background-image:url('/static/assets/images/demo/1200x800/27-min.jpg')">
        <div class="overlay dark-3"><!-- dark overlay [1 to 9 opacity] --></div>

        <div class="container">

            <h1>{{category.title}}</h1>

            <!-- breadcrumbs -->
            <ol class="breadcrumb f-14">
                <li><a href="/">首页</a></li>
                {%for val in breadcrumb %}
                {% if val.id == category.id %}
                <li class="active">{{val.title}}</li>
                {% else %}
                <li><a href="{{val.url}}">{{val.title}}</a></li>

                {% endif %}
                {% endfor %}
            </ol><!-- /breadcrumbs -->
            {%column data="column",pid=breadcrumb[0].id%}
            {%if column %}
            <ul class="page-header-tabs list-inline">
                <!--<li class="active"><a href="portfolio-masonry-3-columns.html">With Gutter</a></li>-->
                {%for val in column%}
                <li  {%if val.id == category.id %}class="active"{%endif%}><a href="{{val.url}}">{{val.name}}</a></li>
                {%endfor%}
            </ul>
            {%endif%}
        </div>
    </section>
#}
<style>
    section {
    display: block;
    position: relative;
    padding: 20px 0;
    border-bottom: rgba(0,0,0,0.1) 1px solid;
    -webkit-transition: all .400s;
    -moz-transition: all .400s;
    -o-transition: all .400s;
    transition: all .400s;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    background-size: cover !important;
    box-sizing: border-box !important;
}
.list-group-item:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

a.list-group-item, button.list-group-item {
    color: #555;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
}
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-info>.panel-heading {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: inherit;
    font-weight: 500;
}
.panel-body {
    padding:40px 64px;
    text-justify: inter-ideograph;
    text-align: justify;
    background-color: #fff;
}
#contentcmswing {
    font-size: 1.5rem;
    color: #555;
}
</style>
    <!-- /PAGE HEADER -->
<section >
    <div  class="container">
        <!--添加广告位-->
        {{11|show_ad("code")|safe}}
        <div class="row">
        <div class="col-md-2 col-sm-2">
            {%column data="column",pid=breadcrumb[0].id%}
            {%if column %}
            <div class="list-group">
                {%for val in column%}
                <a href="{{val.url}}" class="list-group-item {%if val.id == category.id %}active{%endif%}">{{val.name}}</a>
                {%endfor%}
            </div>
            {%endif%}
        </div>
        <div class="col-md-10 col-sm-10">
            <div class="panel panel-info">
                    <div class="panel-heading">
                            <h2 class="panel-title">{{category.title}}</h2>
                        </div>
                <div class="panel-body">
                    <div id="contentcmswing">{{category.sp_html_pc|safe}}</div>
                </div>
            </div>

        </div>
        </div>
    </div>
</section>
{% endblock %}